import { CommandDialog } from '@amcax/base';
import i18n from '@app-cad/common/utils/i18next';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import { useEffect, useState } from 'react';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { TwoGuides } from './two-guides';
import { ThreeGuides } from './three-guides';
import { FourGuides } from './four-guides';
import { FiveGuides } from './five-guides';

const ConicalSweep = ({ title, onClose, props }: CurvedCmdDialogParams) => {
  const [mode, setMode] = useState<
    'TwoGuides' | 'ThreeGuides' | 'FourGuides' | 'FiveGuides'
  >('TwoGuides');

  // props需要为state，以确保props和mode同时更新，分发的模式不会收到错误的props
  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    setMode(props?.params?.mode ?? 'TwoGuides');
    setEditProps(props);
    setEditDxid(props?.shape);
  }, [props?.shape]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'>
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='类型'>
        <Select
          options={[
            { value: 'TwoGuides', label: '两条引导曲线' },
            { value: 'ThreeGuides', label: '三条引导曲线' },
            { value: 'FourGuides', label: '四条引导曲线' },
            { value: 'FiveGuides', label: '五条引导曲线' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
              setEditProps(null);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'TwoGuides' && (
        <TwoGuides
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'ThreeGuides' && (
        <ThreeGuides
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'FourGuides' && (
        <FourGuides
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'FiveGuides' && (
        <FiveGuides
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
    </CommandDialog>
  );
};

export const cmdConicalSweep: CurvedBaseCommand = {
  id: 'cmdConicalSweep',
  label: 'command.curve-conic-sweep',
  icon: 'commands/curved/curve-sweep',
  help: {
    remark: 'tips.redo',
  },
  create: (label, onClose, props) => (
    <ConicalSweep
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
